<template>
  <div>
    <!-- 管理员登录|用户名登录 -->
    <div class="el-main-login">
      <el-row>
        <!-- 管理员登录 -->
        <el-col :span="12" style="  border-right: 1px solid #b1b1b1;position: relative">
          <div class="el-main-login-left">
            <a href="javascript:void(0) " @click="showAdminLogin()"
               style="outline: rgb(109, 109, 109) none 0px;left: 0;top: 18px;left:38px; ">管理员登录</a>
          </div>
        </el-col>
        <!-- 用户登录 -->
        <el-col :span="12" style="position: relative">
          <div class="el-main-login-right">
            <a href="javascript:void(0)"  @click="showUserLogin()"
               style="outline: rgb(109, 109, 109) none 0px;top: 18px;left:38px;" class="checked">用户登录</a>
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- 用户登录表单 -->
    <el-form :model="userLoginInfo" v-if="isShow" label-width="0px" class="login_form" status-icon :rules="rules" ref="userLoginInfo">
      <!-- 用户名 -->
      <el-form-item prop="username">
        <el-input type="text" v-model="userLoginInfo.username" prefix-icon="el-icon-user"  placeholder="请输入用户名"></el-input>
      </el-form-item>
      <!-- 密码 -->
      <el-form-item prop="password">
        <el-input  type="password" v-model="userLoginInfo.password" prefix-icon="el-icon-lock"  placeholder="请输入密码"></el-input>
      </el-form-item>
      <!-- 按钮组件 -->
      <el-form-item class="bts">
        <el-button type="primary" style="width: 310px;" @click="userLogin('userLoginInfo')">登录</el-button>
      </el-form-item>
    </el-form>
    <!-- 管理员登录表单 -->
    <el-form :model="adminLoginInfo" v-else="isShow" label-width="0px" class="login_form" status-icon :rules="rules" ref="adminLoginInfo">
      <!-- 用户名 -->
      <el-form-item  prop="username">
        <el-input v-model="adminLoginInfo.username" type="text" prefix-icon="el-icon-user" placeholder="请输入管理员账号"></el-input>
      </el-form-item>
      <!-- 密码 -->
      <el-form-item  prop="password">
        <el-input v-model="adminLoginInfo.password" type="password" prefix-icon="el-icon-lock" placeholder="请输入密码"></el-input>
      </el-form-item>
      <!-- 按钮组件 -->
      <el-form-item class="bts">
        <el-button type="primary" style="width: 310px;" @click="adminLogin('adminLoginInfo')">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    var validateuserName = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入用户名'));
      } else {
        callback();
      }
    };
    var validateuserPass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        callback();
      }
    };
    return {
      isShow: true,
      userLoginInfo: {
        username: '',
        password: '',
      },
      adminLoginInfo:{
        username: '',
        password: '',
      },
      rules: {
        username: [
          {validator: validateuserName, trigger: 'blur'}
        ],
        password: [
          {validator: validateuserPass, trigger: 'blur'}
        ],
      },
    }
  },
  methods:{
    showUserLogin() {
      this.isShow=true;
    },
    showAdminLogin(){
      this.isShow=false;
    },
    userLogin(userLoginInfo){
      this.$refs[userLoginInfo].validate((valid) => {
        if (valid){
          let url='http://localhost:8080/users/login';
          // console.log("data >> "+data)
          this.axios.post(url,this.userLoginInfo).then((response)=>{
            let json=response.data
            let state=json.state
            if (state==20000){
              this.$message({
                showClose: true,
                message: '登录成功',
                type: 'success'
              });
              let data = json.data
              sessionStorage.setItem('user', JSON.stringify(data));
              location.href="/"
            }
            else {
              console.log(json.message);
              this.$message.error(json.message);
            }
          })

        }
        else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    adminLogin(adminLoginInfo){
      this.$refs[adminLoginInfo].validate((valid) => {
        if (valid){
          let url='http://localhost:8080/admins/login';
          // console.log("data >> "+data)
          this.axios.post(url,this.adminLoginInfo).then((reponse)=>{
            let json=reponse.data
            let state=json.state
            if (state==20000){
              location.href="/admin"
            }
            else {
              console.log(json.message);
              this.$message.error(json.message);
            }
          })

        }
        else {
          console.log('error submit!!');
          return false;
        }
      });

    },
  },
}
</script>

